<!-- 一期所有样式和js都写入到html中 -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1, minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui,viewport-fit=cover"
    />
    <title>逗学教育</title>
    <link rel="stylesheet" href="../../common/css/vant.css" />
    <link rel="stylesheet" href="../../common/css/common.css" />
    <style>
      /*
			页面的所有css，必须有页面前缀
			如首页，则所有css以 .index- 开头
         */
      .action-container {
        margin: 0.6rem 0.2rem 0.2rem;
        background-color: #fff;
      }
      .action-one-container {
        padding: 0.2rem 0.22rem;
      }
      .action-one-right {
        width: 0;
      }
      .action-course-img {
        width: 2.2rem;
        margin-right: 0.2rem;
      }
      .action-course-img img {
        width: 100%;
        height: 100%;
      }
      .action-course-name {
        font-size: 0.3rem;
        margin-bottom: 0.22rem;
      }
      .action-learn-info {
        padding-top: 0.2rem;
        font-size: 0.24rem;
      }
      .action-person-img {
        width: 0.4rem;
        vertical-align: -0.1rem;
      }
      .action-price {
        color: rgb(248, 112, 112);
      }
      .van-button--default {
        width: 1.8rem;
        height: 0.6rem;
        padding: 0;
        line-height: 0.6rem;
        color: #fff;
        border-radius: 0.1rem;
        background-color: rgb(253, 104, 1);
      }
      .action-activity,
      .action-activitied {
        height: 0.8rem;
        margin: 0.4rem 0.2rem;
        line-height: 0.8rem;
        text-align: center;
        color: #fff;
        background-color: rgb(253, 104, 1);
        border-radius: 0.1rem;
      }
      .action-activitied {
        background-color: rgba(190, 190, 190);
      }
      .action-pe-num {
        color: rgba(180, 180, 180);
      }
      .btn-no {
        background-color: rgba(190, 190, 190);
      }
    </style>
  </head>

  <body>
    <div id="app" v-cloak>
      <!-- ************************ 头 *************************** -->
      <div class="page-top">
        <div class="page-top">
          <div class="flex-wrap flex-justify-between flex-center-wrap header">
            <div class="header-row"></div>
            <div class="flex header-title">课程激活</div>
            <div class="header-right"></div>
          </div>
        </div>
      </div>
      <!-- ************************* 内容 *********************** -->
      <div class="page-content comment-container">
        <div class="placeholder"></div>
        <div class="action-container">
          <div
            v-for="(item, index) of courseList"
            class="flex-wrap action-one-container"
            :key="index"
          >
            <div class="action-course-img">
              <img :src="item.coverurl" alt="" />
            </div>
            <div class="flex action-one-right">
              <div class="text-ess-1 action-course-name">{{ item.title }}</div>
              <div class="flex-wrap flex-justify-between">
                <div class="action-learn-info">
                  <img
                    class="action-person-img"
                    src="./image/personNum.png"
                    alt=""
                  />
                  <span class="action-pe-num">{{ item.views }}</span>
                  <span class="action-price">￥{{ item.shop_price }}</span>
                </div>
                <van-button
                  v-if="item.coursetype === 1 && item.isbuy === 1"
                  type="default"
                  @click="goToListen(item.courseid)"
                  >进入听课</van-button
                >
                <van-button
                  class="btn-no"
                  v-if="item.coursetype === 1 && item.isbuy === 0"
                  type="default"
                  disabled
                  >进入听课</van-button
                >
                <van-button
                  v-if="item.coursetype === 0 && item.isbuy === 1"
                  type="default"
                  @click="goToExam"
                  >进入做题</van-button
                >
                <van-button
                  v-if="item.coursetype === 0 && item.isbuy === 0"
                  type="default"
                  class="btn-no"
                  disabled
                  >进入做题</van-button
                >
              </div>
            </div>
          </div>
        </div>
        <div v-if="isCanAction" class="action-activity" @click="action">
          立即激活
        </div>
        <div v-else class="action-activitied">已激活</div>
      </div>
    </div>

    <script src="../../common/js/common.js"></script>
    <script src="../../common/js/vue.min.js"></script>
    <script src="../../common/js/vant.min.js"></script>
    <script src="../../common/js/http.js"></script>
    <script src="../../common/js/utils.js"></script>
    <script src="../../widget/service/user.service.js"></script>
    <script>
      // 注册 Lazyload 组件
      Vue.use(vant.Lazyload)
      // 注册 Image 组件
      Vue.use(vant.Button)
      Vue.use(vant.Toast)

      new Vue({
        el: '#app',
        components: {},
        data: {
          courseList: [],
          // 激活码
          code: ''
        },
        computed: {
          isCanAction() {
            return this.courseList.some(item => {
              return item.isbuy === 0
            })
          }
        },
        methods: {
          // 进入听课
          goToListen(id) {
            location.href = `../courseCenter/videoCourse.html?courseid=${id}`
          },
          // 进入做题
          goToExam() {
            location.href = `../examCenter/topic.html`
          },
          // 激活
          action() {
            userService.activationCourse({ code: this.code }).then(res2 => {
              if (res2.code) {
                this.$toast(res2.message)
              } else {
                location.href = `../personCenter/order.html`
              }
            })
          }
        },
        created() {
          const queryObj = utils.getQuery(location.href)
          userService.getActivityInfo({ code: queryObj.code }).then(res => {
            if (!res.code) {
              this.courseList = res.list
              this.code = res.code_detail
            } else {
              this.$toast(res.message)
            }
          })
        }
      })
    </script>
  </body>
</html>
